import { Meteors } from "./meteors";
export default function UserInfo({ username }) {
  return (
    <>
      <div className="">
        <div className="relative w-full max-w-xl">
          <div className="absolute inset-0 h-full w-full scale-[0.80] transform rounded-full bg-red-500 bg-gradient-to-r from-blue-500 to-teal-500 blur-[80px]" />
          <div className="relative flex h-full flex-col items-start justify-end overflow-hidden rounded-2xl border border-gray-800 bg-gray-900 px-4 py-8 shadow-2xl">
            <div className="mb-4 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth="1.5"
                stroke="currentColor"
                className="h-2 w-2 text-gray-300"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M4.5 4.5l15 15m0 0V8.25m0 11.25H8.25"
                />
              </svg>
            </div>

            <h1 className="relative z-50 mb-4 text-xl font-bold text-white">
              欢迎,{username}
            </h1>

            <p className="relative z-50 mb-4 text-base font-normal text-slate-500">
              这是占位符 (=｀ω´=) (=｀ω´=) (=｀ω´=)
            </p>

            <button className="rounded-lg border border-gray-500 px-4 py-1 text-gray-300">
              修改密码
            </button>

            <Meteors number={20} />
          </div>
        </div>
      </div>
    </>
  );
}
